<template>
    <div class="text-with-input">
        <p v-if="!state.status" @click="state.status = !state.status">{{state.text}}</p>
        <div class="edit" v-else>
            <a-input v-model:value="state.newText" />
            <a-button type="primary" class="save" @click="save">保存</a-button>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
    name: "textWithInput",
    props: {
        text: {
            required: true,
            type: String
        }
    },
    setup(props, context){
        const state = reactive({
            status: false,
            text: props.text,
            newText: props.text
        })

        const save = () => {
            state.status = !state.status;
            state.text = state.newText;
            context.emit("save", state.text)
        }
        return {
            state,
            save
        }
    }
}
</script>

<style lang="scss">
.text-with-input{
    flex: 1;
    p{
        font-size: 16px;
        color: $titleColor;
    }
    .edit{
        display: flex;
        justify-content: center;
        align-content: center;
        .save{
            margin-left: 10px;
        }
    }
}
</style>